<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 引用模板 Header -->
    <div th:insert="bg/publicHead :: publicHead(${pageName})"></div>
    <!-- [ Header ] end -->

    <link rel="stylesheet" href="/css/base.css" type="text/css" />
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/js/sweetalert.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/stroage.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/comm.js" type="text/javascript" charset="UTF-8"></script>

    <script th:inline="javascript">
        window.onerror=function(){return true;};
        var ServerIP=[(${ServerIP!=null?'"'+ServerIP+'"':'"'+'"'})];
        var contentVal=[(${contentVal!=null?"'"+contentVal+"'":"'"+"'"})];
        var maxFileSize=500; //KB
        $(document).ready(function() {

            if(contentVal!=null && contentVal!=""){
                editor.setHtml(contentVal);
            }


            //发布
            $(".addBtn").click(async function(){
                var content= editor.getHtml();
                console.log("联系方式内容",content);
                if(/\S/.test(content.replace("<p><br></p>",""))===false){
                    swal("请输入联系方式内容", "联系方式内容不能为空", "error");
                    return;
                }
                if (confirm("是否添加联系方式?")) {
                    var addData={
                        content:$.trim(content),
                    };
                    console.log("上传参数:",addData);
                    if(addData!=null){
                        var res=await SyncJson("/api/addContacts",addData);
                        if(res.code===200){
                            myStorage.removeItem("editorContactsHtml");
                            alert("更新成功");
                        }
                    }
                }
            });
        }); //document.ready End


    </script>
</head>

<!-- background:url('/bgTemplate/image/body-bg-7.jpg'); -->
<body class="bodybg">
<!-- [ Main Content ] start -->
<div class="contain">
    <h4>添加联系方式</h4>
    <div class="doctors">
        <div id="editor—wrapper">
            <div id="toolbar-container"><!-- 工具栏 --></div>
            <div id="editor-container"><!-- 编辑器 --></div>
        </div>
        <div class="tables" style="border-bottom:0px; margin-top:20px;">
            <div class="text"><a class="addBtn">提交</a></div>
            <div class="input"></div>
        </div>
    </div>
</div>
<!--中间 End -->
</body>

<!-- **************** WangEditor **************** -->
<!-- 引入 css -->
<!-- /wangEditor/style.css -->
<!-- https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css -->
<link href="/wangEditor/style.css" rel="stylesheet">
<!--<link href="/wangEditor/style.css" rel="stylesheet">-->
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 500px; }
</style>
<!-- 引入 js -->
<!-- /wangEditor/index.js -->
<!-- https://unpkg.com/@wangeditor/editor@latest/dist/index.js -->
<script src="/wangEditor/index.js"></script>
<!--<script src=" /wangEditor/index.js"></script>-->
<script th:inline="javascript">
    var ServerIP=[(${ServerIP!=null?'"'+ServerIP+'"':'"'+'"'})];
    const { createEditor, createToolbar } = window.wangEditor
    const editorConfig = {
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            console.log('编辑器默认内容editor content', html)
            // 也可以同步到 <textarea>
        },
        onBlur(editor){
            const html = editor.getHtml()
            console.log('鼠标离开了编辑器')
            //保存当前状态
            myStorage.setItem("editorContactsHtml",html);
        }
    }
    const editor = createEditor({
        selector: '#editor-container',
        html: "<p><br></p>",
        config: editorConfig,
        mode: 'simple', // or 'simple'
    })
    //打印编辑器配置
    console.log("获取上传菜单配置",editor.getMenuConfig('uploadImage'));


    const toolbarConfig = {
        excludeKeys:[
            'insertVideo',
            'group-image' // 排除图片组
        ]
    }
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple', // or 'simple'
    })

    console.log("获取工具栏配置",toolbar.getConfig().toolbarKeys);
</script>
<!-- **************** WangEditor **************** -->

</html>